<template>
  <div class="from">
    <form action="#">
    <div class="input mui-input-row">
      <span>姓名：</span> <input type="text" class="mui-input-clear" v-model="myName" placeholder="请输入姓名">
    </div>

    <div class="input mui-input-row">
      <span>年龄：</span> <input type="text" class="mui-input-clear" v-model="myAge" placeholder="请输入年龄">
    </div>

    <div class="input">
      <span>性别：</span>
      <div class="centent">
        <div class="mui-input-row mui-radio mui-left">
          <label>男</label>
          <input name="mySex" type="radio" value="男" v-model="mySex">
        </div>
        <div class="mui-input-row mui-radio mui-left">
          <label>女</label>
          <input name="mySex" type="radio" value="女" v-model="mySex">
        </div>
      </div>
    </div>

    <div class="input1">
      <span>爱好：</span>
      <div class="centent">
        <div class="mui-input-row mui-checkbox mui-left" v-for="(item,index) in likeArray">
          <label>{{item.value}}</label>
          <input name="checkbox" :value="item.value" type="checkbox" v-model="checkArray">
        </div>
      </div>
    </div>
    <div class="input">
      <span>银行：</span>
      <select v-model="myBank" @change="selectFun">
        <option v-for="(item,index) in selectArray" :value="item.value">{{item.value}}</option>
      </select>
    </div>

    <div class="input1">
      <textarea v-model="textarea" placeholder="add multiple lines" maxlength="200" @input="textareaLen"></textarea>
      <p>{{textareaLength}}/200</p>
    </div>


    <div id="popover" class="mui-popover">
    	<div>
    		<li class="mui-table-view-cell"><a href="javaScript:;">姓名：{{myName}}</a></li>
        <li class="mui-table-view-cell"><a href="javaScript:;">年龄：{{myAge}}</a></li>
        <li class="mui-table-view-cell"><a href="javaScript:;">性别：{{mySex}}</a></li>
        <li class="mui-table-view-cell"><a href="javaScript:;">银行：{{myBank}}</a></li>
        <li class="mui-table-view-cell"><a href="javaScript:;">爱好：<p v-for="(item,index) in checkArray">{{index+1}}、{{item}}</p>
        </a></li>
        <li class="mui-table-view-cell"><a href="#">留言：{{textarea}}</a></li>
    	</div>
    </div>
    <a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

    <div class="nex">
      v-model修饰符：
          <p>.lazy 与change事件同步</p>
          <p> .number  输入值为Number</p>
          <p>.trim  自动去除收尾空格</p>
    </div>
     </form>
  </div>
</template>

<script>
  export default {
    name: "from",
    data() {
      return {
        checkedNames: "",
        selectNum: 0,
        myName: "",
        myAge: "",
        mySex: "",
        myBank: "",
        checkArray: [],
        textarea: "",
        textareaLength: 0,
        selectArray: [{"value": "建设银行"}, {"value": "农业银行"}, {"value": "中国银行"}],
        likeArray: [{"value": "睡觉"}, {"value": "游泳"}, {"value": "足球"}, {"value": "篮球"}, {"value": "爬山"}, {"value": "徒步"}]
      }
    },
    created() {
      this.myBank = this.selectArray[this.selectNum].value;
    },
    methods: {
      selectFun() {
        console.log(this.myBank);
      },
      textareaLen() {
        this.textareaLength = this.textarea.length;
      }
    }
  }
</script>

<style scoped lang="scss">
  .from {
    width: 100%;
    height: 100%;
    padding: 16px;

    .input {
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      input, select {
        margin: 0;
        flex: 1;
        font-size: 14px;
      }
      .centent {
        flex: 1;
        display: flex;
      }

      span {
        width: 60px;
        text-align: center;
        font-size: 18px;
      }

    }

    .input1 {
      position: relative;
      span {
        font-size: 18px;
      }
      .centent {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .mui-checkbox {
          width: 31%;
          text-align: center;
        }
      }
      textarea {
        margin-top: 30px;
        height: 200px;
      }
      p {
        position: absolute;
        bottom: 30px;
        right: 20px;
      }
    }
    .mui-table-view-cell p {
      padding-left: 25px;
    }
  }
</style>
